
<html>
    <head>
        <title>甜品商城</title>
        <meta charset="UTF-8">
        <style>
            .box{
                float: left;
                position: absolute;
                transform: translate(150%,50%);
                
            }
            .ttl{
                color: deeppink;
                font-size: 30px;
                float: left;
            }
            .dh a{
                list-style: none;
                float: right;
                font-size: 20px;
                margin-left: 12px;               
            }
            .dh span{
                position: absolute;
                transform: translate(20000%,10%);
            }
            .zh{
                    
                width: 1000px;
                height: 667px;
                position: absolute;
                transform: translate(40%,50%);
            }
            .dhl a{
                font-size: 30px;
                position: absolute;
                transform: translate(100%,100%);
                margin-left: -150px;
                
            }
            .tp  img{
                position: absolute;
                transform: translate(-40%,25%);
            }
            .tp1  img{
                position: absolute;
                transform: translate(55%,24%);
            }
             .tp2  img{
                position: absolute;
                transform: translate(155%,24%);
            }
            .tp3  img{
                position: absolute;
                transform: translate(265%,24%);
            }
            .tp4  img{
                position: absolute;
                transform: translate(-42%,130%);
            }
            .tp5  img{
                position: absolute;
                transform: translate(60%,130%);
            }
            .tp6  img{
                position: absolute;
                transform: translate(150%,118%);
            }
            .tp7  img{
                position: absolute;
                transform: translate(250%,128%);
            }
            .ym{
                 position: absolute;
                transform: translate(250%,3500%);
            }
            
        </style>
    </head>
    
    

    
    
    <body>
        <div class="zh">
            <div class="ttl">甜甜啦</div>
            
            <div class="box">
                <input type="text" class="input" placeholder="请输入商品">
                <input type="button" value="搜索" class="button">
            </div>
            
            <div class="dh">
                <a href="" >登录</a>
                <span>|</span>
                <a href="" >注册</a>
            </div>
            <div class="dhl">
                
                    <a href="">首页</a>
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                    <a href="">我的订单</a>
            </div>
            <div class="tp">
                <a href="index.php">
                    <img src="1.png">
                    
            </div>
            <div class="tp1">
                <a href="index.php">
                    <img src="2.png">
                    
            </div>
            <div class="tp2">
                <a href="index.php">
                    <img src="3.png">
                    
            </div>
             <div class="tp3">
                <a href="index.php">
                    <img src="4.png">
                    
            </div>
            
             <div class="tp4">
                <a href="index.php">
                    <img src="5.png">
                    
            </div>
            <div class="tp5">
                    <a href="index.php">
                        <img src="6.png">

            </div>
            <div class="tp6">
                    <a href="index.php">
                        <img src="7.png">

            </div>
            <div class="tp7">
                    <a href="index.php">
                        <img src="8.png">

            </div>
            <div class="ym">
                <button onclick="previousPage()">上一页</button>>
                <button onclick="nextPage()">下一页</button>>
                
            </div>
    </div>
            <script>        
                var currentPage=1;
                
                function previousPage(){
                    if(currentPage>1){
                     currentPage--;   
                    }
                }
                function nextPage(){
                    currentPage++;
                }
            </script>
        
    </body>
</html>
